<template>
  <div class="date_css">
    <p v-if='isReadOnlyPage === true'>{{ value }}</p>
    <a-date-picker v-else @change="onChange($event, keys)" :defaultPickerValue="defaultPickerValue || moment()" v-model="reverseDate" style='width:100%' :allowClear='false' :getPopupContainer="node => node.parentNode" :disabled="isDisabled"/>
    <a-checkbox class="now-show" v-model="soFar" @change="onChangeSoFar($event)" v-if="isSoFar">至今</a-checkbox>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  name: 'Date',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'keys', 'isDisabled', 'isReadOnlyPage', 'defaultPickerValue', 'isSoFar'],
  watch: {
    value: {
      handler (newVal) {
        if (newVal) {
          if (moment(newVal).format('YYYY-MM') === '4000-10') {
            this.reverseDate = null
            this.soFar = true
          } else {
            this.reverseDate = moment(newVal)
          }
        } else {
          this.reverseDate = null
        }
      },
      immediate: true
    }
  },
  computed: {
    strValue () {
      return this.value && this.value.toString()
    },
    values () {
      return this.value.substring(0, this.value.indexOf('T'))
    }
  },
  data () {
    return {
      moment,
      dateFormat: 'YYYY-MM-DD',
      reverseDate: null,
      soFar: false
    }
  },
  filters: {
    dateFilter (val) {
      return val.substring(0, val.indexOf('T'))
    },
    dateFilterEmpty (val) {
      return val && val.substring(0, val.indexOf(' '))
    }
  },
  methods: {
    arrageData (value) {
      this.$emit('change', value, this.keys)
    },
    onChangeSoFar () {
      this.reverseDate = null
      this.arrageData('4000-10')
    },
    onChange (event) {
      let value = null
      value = moment(event).format('YYYY-MM-DD')
      this.soFar = false
      this.arrageData(value)
    }
  }
}
</script>
<style lang="stylus" scoped>
.date_css
  display flex
  align-items center
  .now-show
    white-space nowrap
    margin-left 10px
</style>
